<template>
  <el-dialog
    v-if="isDialog"
    title="地址选择"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    width="740px"
  >
    <div class="map-point">
      <Map
        :show="show"
        :info="addr"
        :autoCompleteCity="autoCompleteCity"
        @cancel="dialogCancel"
        @confirm="dialogConfirm"
      />
    </div>
    <div slot="footer">
      <span class="dialog-footer">
        <el-button @click="onCancel">关 闭</el-button>
        <el-button type="primary" @click="onOk">确 定</el-button>
      </span>
    </div>
  </el-dialog>
  <div class="map-point" v-else>
    <Map :show="show" :info="addr" @cancel="show = false" @confirm="confirm" />
  </div>
</template>

<script>
import Map from "./map.vue";
export default {
  components: {
    Map,
  },
  props: {
    isDialog: {
      type: Boolean,
      default: false,
    },
    autoCompleteCity:{
      type:String,
      default:'全国'
    }
  },
  data() {
    return {
      dialogVisible: false,
      show: false,
      addr: {},
    };
  },
  mounted() {},
  methods: {
    onOk() {
      if (!this.addr.name) {
        this.$message.warning("请先选择一个地址");
        return false;
      }
      this.dialogVisible = false;
      this.show = false;
      this.$emit("confirm", this.addr);
    },
    onCancel() {
      this.show = false;
      this.dialogVisible = false;
    },

    open() {
      if (this.isDialog) {
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.show = true;
        });
      } else {
        this.show = true;
      }
    },
    dialogCancel() {
      this.show = false;
      this.dialogVisible = false;
    },
    dialogConfirm(info) {
      this.addr = info;
    },
    confirm(info) {
      this.addr = info;
      this.$emit("confirm", info);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-top: 0 !important;
}
.map-point {
  .open {
    width: 460px;
    margin: 300px auto;
    .info {
      margin-bottom: 20px;
    }
  }
}
</style>
